<template>
    <el-container class="jxc_buy_year_report_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate
                    slot="header"
                    ref="header"
                    :table-ref="tableOptions.ref"
                    :toolbar_buttons="headerOption.toolbar_buttons"
                    :toolbar_filter="headerOption.toolbar_filter"
                    :searchForm="searchForm"
                    :isSearchInput="false"
                    @event="handleHeaderEvent">
                    <template slot="toolbar_buttons">
                        <div style="line-height: 34px; display: flex;">
                            <div style="margin-right: 2em;">
                                <el-button type="primary" icon="el-icon-bottom" @click="handleExport">导出</el-button>
                            </div>
                            <div>
                                <el-radio-group v-model="checkRadio" @change="initPage">
                                    <el-radio :label="1">采购年度</el-radio>
                                    <el-radio :label="2">采购退货年度</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </template>
                    <template slot="right_search">
                        <el-form-item label="年份" style="margin-top: 4px; margin-bottom: 4px;">
                            <el-date-picker
                                v-model="searchForm.yyyy"
                                type="year"
                                placeholder="选择年份"
                                value-format="yyyy"
                                format="yyyy 年"
                                style="width: 130px;"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </template>
                </headerTemplate>
                <vxeTableTemplate
                    ref="xTable"
                    :data="dataList"
                    :options="tableOptions"
                    @handleChangePage="handleChangePage"
                />
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import poiApi from "@common/api/poiApi";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "JxcBuyYearReport",
    data() {
        let _this = this;
        return {
            headerOption: {
                toolbar_buttons: [],
                toolbar_filter: [
                    { type: "text", field: "goods_code", label: "物料编号" },
                    { type: "text", field: "goods_name", label: "物料名称" },
                ],
            },
            checkRadio: 1,
            searchForm: {},
            dataList: [],
            tableOptions: {
                ref: "JxcBuyYearReportTable",
                container: ".jxc_buy_year_report_container",
                multiSelect: false,
                showSummary: true,
                summaryArray: ["total_qty", "total_amount", "total_qty_1", "total_qty_2", "total_qty_3",
                    "total_qty_4", "total_qty_5", "total_qty_6", "total_qty_7", "total_qty_8", "total_qty_9",
                    "total_qty_10", "total_qty_11", "total_qty_12", "total_amount_1", "total_amount_2",
                    "total_amount_3", "total_amount_4", "total_amount_5", "total_amount_6", "total_amount_7",
                    "total_amount_8", "total_amount_9", "total_amount_10", "total_amount_11", "total_amount_12"],
                columns:[
                    {
                        label: '物料编号',
                        prop: 'goods_code',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '物料名称',
                        prop: 'goods_name',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '规格',
                        prop: 'goods_specifications',
                        align: 'center',
                        minWidth: 150,
                        render: (h, {row}) => {
                            if (row.goods_specifications) {
                                let specificationArr = JSON.parse(row.goods_specifications);
                                let arr = specificationArr.map(item => {
                                    return h("el-tag", {
                                        style: {
                                            'margin-right': '5px',
                                        },
                                        props: {},
                                    }, `${item.specification}：${item.value}`);
                                });
                                return h('div', {}, arr);
                            } else {
                                return h('div', {});
                            }
                        },
                    },
                    {
                        label: '总数量',
                        prop: 'total_qty',
                        align: 'center',
                        width: 100,
                    },
                    {
                        label: '总金额',
                        prop: 'total_amount',
                        align: 'center',
                        minWidth: 100,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '1月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_1',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_1',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '2月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_2',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_2',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '3月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_3',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_3',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '4月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_4',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_4',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '5月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_5',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_5',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '6月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_6',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_6',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '7月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_7',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_7',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '8月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_8',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_8',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '9月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_9',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_9',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '10月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_10',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_10',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '11月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_11',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_11',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                    {
                        label: '12月',
                        align: 'center',
                        minWidth: 150,
                        children: [
                            {
                                label: '数量',
                                prop: 'total_qty_12',
                                align: 'center',
                                width: 60,
                            },
                            {
                                label: '金额',
                                prop: 'total_amount_12',
                                align: 'center',
                                width: 90,
                                formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                            },
                        ]
                    },
                ],
                operates: false,
                pagination: {
                    pageIndex: 1,
                },
            },
        };
    },
    mounted() {
        this.initPage();
    },
    methods: {
        // 初始化
        initPage() {
            let _this = this;
            if (!_this.searchForm.yyyy) {
                _this.searchForm = $.extend({}, _this.searchForm, {yyyy: _this.$utils.formatDate(new Date(), 'yyyy')})
            }
            if (_this.checkRadio === 1) {
                _this.getList(true);
            } else {
                _this.getReturnList(true);
            }
        },
        // 刷新、查询
        handleHeaderEvent(event) {
            let _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.initPage();
            } else if (event.type === "refresh") {
                _this.initPage();
            }
        },
        // 选择页
        handleChangePage(page) {
            let _this = this;
            _this.tableOptions.pagination.pageIndex = page.pageIndex;
            _this.tableOptions.pagination.pageSize = page.pageSize;
            _this.getList(true);
        },
        // 获取列表信息
        getList(query) {
            let _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            _this.fetchData(_this.$api.API_FindBuyYearReportListByPage, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {

            });
        },
        //
        getReturnList(query) {
            let _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            _this.fetchData(_this.$api.API_FindBuyReturnYearReportListByPage, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {

            });
        },
        // 导出Excel
        handleExport() {
            const _this = this;
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            let templateName = _this.$api.EXPORT_TEMPLATE_NAME_BUY_YEAR;
            let outputName =  _this.checkRadio === 1 ? '采购年度报表' : '采购年度退货报表';
            let url = _this.checkRadio === 1 ? _this.$api.API_FindBuyYearReportListByPage : _this.$api.API_FindBuyReturnYearReportListByPage;
            poiApi.exportExcelTemplate(templateName, url, queryData, outputName, {}, undefined, 1, 100, false, true);
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.jxc_buy_year_report_container {

}
</style>
